<template>
  <div class="addBackDialog">
    <el-dialog
      fullscreen
      v-model="dialogVisible"
      :title="isEdit ? '编辑企业背景信息' : '添加企业背景信息'"
      width="800"
      @close="emit('submit')"
    >
      <el-form ref="formRef" :model="form" label-width="auto">
        <el-form-item label="企业名称" prop="name">
          <el-select
            :disabled="isEdit"
            style="width: 200px"
            v-model="options.value"
            placeholder="请选择企业"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="历史信息" prop="historicalInfo">
          <el-input
            :rows="4"
            v-model="form.historicalInfo"
            type="textarea"
            placeholder="请输入企业历史信息"
          ></el-input>
        </el-form-item>
        <!-- 法律诉讼 -->
        <el-form-item label="法律诉讼" prop="lawsuit">
          <el-button class="addBtn" size="small" type="primary" @click="addLawsuit"
            >新增诉讼</el-button
          >
          <el-table :data="form.lawsuits" border>
            <el-table-column prop="caseNo" label="案件编号">
              <template #default="scope">
                <el-input v-model="scope.row.caseNo"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="诉讼原因">
              <template #default="scope">
                <el-input v-model="scope.row.reason"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="诉讼日期">
              <template #default="scope">
                <el-date-picker
                  v-model="scope.row.date"
                  type="date"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="result" label="判决结果">
              <template #default="scope">
                <el-select v-model="scope.row.result">
                  <el-option label="胜诉" value="胜诉"></el-option>
                  <el-option label="败诉" value="败诉"></el-option>
                  <el-option label="和解" value="和解"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="removeLawsuit(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <!-- 行政处罚 -->
        <el-form-item label="行政处罚" prop="administrativePenalties">
          <el-button class="addBtn" size="small" type="primary" @click="addPenalty"
            >新增处罚</el-button
          >
          <el-table :data="form.administrativePenalties" border>
            <el-table-column prop="penaltyNo" label="处罚编号">
              <template #default="scope">
                <el-input v-model="scope.row.penaltyNo"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="处罚原因">
              <template #default="scope">
                <el-input v-model="scope.row.reason"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="罚款金额">
              <template #default="scope">
                <el-input-number v-model="scope.row.amount" :min="0"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="处罚日期">
              <template #default="scope">
                <el-date-picker
                  v-model="scope.row.date"
                  type="date"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="removePenalty(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <!-- 失信记录 -->
        <el-form-item label="失信记录" prop="dishonestyRecord">
          <el-button class="addBtn" size="small" type="primary" @click="addDishonestyRecord"
            >新增失信记录</el-button
          >
          <el-table :data="form.dishonestyRecords" border>
            <el-table-column prop="recordNo" label="记录编号">
              <template #default="scope">
                <el-input v-model="scope.row.recordNo"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="失信原因">
              <template #default="scope">
                <el-input v-model="scope.row.reason"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="记录日期">
              <template #default="scope">
                <el-date-picker
                  v-model="scope.row.date"
                  type="date"
                  value-format="YYYY-MM-DD"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-select v-model="scope.row.status">
                  <el-option label="已解除" value="已解除"></el-option>
                  <el-option label="未解除" value="未解除"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="removeDishonestyRecord(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { getEnterpriseAll, createEnterpriseBack, updateEnterpriseBack } from '@/api/enterprise'
import { onMounted, reactive, ref } from 'vue'

const dialogVisible = ref(false)
const isEdit = ref(false) // 是否为编辑模式
const formRef = ref(null)

const form = reactive({
  historicalInfo: '',
  lawsuits: [],
  administrativePenalties: [],
  dishonestyRecords: [],
})

const options = ref([])
const emit = defineEmits(['submit'])

const getEnterpriseData = async () => {
  const res = await getEnterpriseAll()
  if (res.status === 201 || res.status === 200) {
    // 处理数据，获取每个企业的信息
    options.value = res.data.data.map((enterprise) => {
      return {
        label: enterprise.name,
        value: enterprise.id,
      }
    })
  }
}

onMounted(() => {
  getEnterpriseData()
})

// 诉讼
const addLawsuit = () => form.lawsuits.push({ caseNo: '', reason: '', date: '', result: '' })
const removeLawsuit = (row) => {
  form.lawsuits = form.lawsuits.filter((item) => item.caseNo !== row.caseNo)
}

// 行政处罚
const addPenalty = () =>
  form.administrativePenalties.push({ penaltyNo: '', reason: '', amount: 0, date: '' })
const removePenalty = (index) => {
  form.administrativePenalties = form.administrativePenalties.filter(
    (item) => item.penaltyNo !== index.penaltyNo
  )
}

// 失信记录
const addDishonestyRecord = () =>
  form.dishonestyRecords.push({ recordNo: '', reason: '', date: '', status: '' })
const removeDishonestyRecord = (row) => {
  form.dishonestyRecords = form.dishonestyRecords.filter((item) => item.recordNo !== row.recordNo)
}

// 提交表单
const submitForm = async () => {
  let res
  if (isEdit.value) {
    // 编辑企业
    res = await updateEnterpriseBack({ ...form })
  } else {
    // 创建企业
    res = await createEnterpriseBack({
      enterprise_id: options.value.value,
      ...form,
    })
  }
  if (res.status === 201 || res.status === 200) {
    ElMessage.success(isEdit.value ? '编辑成功' : '添加成功')
    closeDialog()
    formRef.value.resetFields()
    emit('submit')
  } else {
    ElMessage.error(res.data.data || '系统繁忙，请稍后再试')
  }
}

const openDialog = (data = null) => {
  if (data) {
    console.log(data)
    isEdit.value = true
    options.value.value = data.enterprise.id
    Object.assign(form, data)
  } else {
    form.administrativePenalties = []
    form.dishonestyRecords = []
    form.lawsuits = []
    form.historicalInfo = ''
    options.value.value = ''
    isEdit.value = false
  }
  dialogVisible.value = true
}

const closeDialog = () => {
  dialogVisible.value = false

  formRef.value.resetFields()
}

defineExpose({ openDialog, closeDialog })
</script>

<style lang="scss" scoped>
.addBackDialog {
  .addBtn {
    margin: 5px 0 10px 0;
  }
}
</style>
